<div class="container-tight py-4">
    <div class="text-center mb-4">
        <a href="."><img src="/mix-app/css/portal/img/mixcore-logo-red-2.svg" alt="Mixcore CMS" height="36"></a>
    </div>
    <div class="card card-md">
        <div class="card-body text-center py-4 p-sm-5">
            <img src="/mix-app/css/portal/img/illustrations/undraw_Setup_wizard_re_nday.svg" height="128" class="mb-n2"
                height="120" alt="">
            <h1 class="mt-5">Welcome to Mixcore!</h1>
            <p class="text-muted">Let start your dream together!</p>
        </div>
        <div class="hr-text hr-text-center hr-text-spaceless">your data</div>
        <div class="card-body">
            <!-- /////////////////////////////////////////////////////// -->
            <div ng-init="loadSettings()"></div>
            <form class="needs-validation" novalidate autocomplete="off">
                <!-- <h1 class="lead mb-5 mt-3">Hi there! Let start the first steps together.</h1> -->
                <!-- <hr> -->
                <div class="intruction-labels">
                    <div class="mb-3">
                        <label class="form-label"> Your site title </label>
                        <input type="text" ng-model="initCmsModel.siteName" class="form-control" required
                            placeholder="My Best Site Ever! - Mixcore CMS" value="My Best Site Ever! - Mixcore CMS" />
                    </div>
                    <div class="mb-5">
                        <label class="form-label"> Your 1st culture & language </label>
                        <select id="inputState" class="form-select"
                            ng-options="item as item.fullName for item in settings.cultures track by item.specificulture"
                            ng-model="initCmsModel.culture"></select>
                    </div>
                    <!-- <hr class="mt-4"> -->
                    <div class="mb-3">
                        <h6 class="text-primary">Database Configuration</h6>
                        <!-- <div class="col-4 text-end">
                <span style="cursor: pointer;" ng-click="initCmsModel.isUseLocal=!initCmsModel.isUseLocal">
                    <span data-bs-toggle="tooltip" data-placement="top" title="Click to change to remote database."
                        style="text-decoration: underline;" ng-if="initCmsModel.isUseLocal">local<i
                            class="fa fa-angle-down ml-1"></i></span>
                    <span data-bs-toggle="tooltip" data-placement="top" title="Click to change to local database."
                        style="text-decoration: underline;" ng-if="!initCmsModel.isUseLocal">remote<i
                            class="fa fa-angle-down ml-1"></i></span>
                </span>
            </div> -->
                    </div>
                    <div class="mb-3" ng-show="!initCmsModel.isUseLocal">
                        <label class="form-label">Server type</label>
                        <select class="form-select" ng-options="item as item.text for item in settings.providers"
                            ng-model="dbProvider" ng-change="updateDbProvider()"></select>
                    </div>
                    <sqlite-info ng-if="!initCmsModel.isUseLocal && dbProvider.value=='SQLITE'"
                        init-cms-model="initCmsModel">
                    </sqlite-info>
                    <mssql-info ng-if="!initCmsModel.isUseLocal && dbProvider.value=='MSSQL'"
                        init-cms-model="initCmsModel">
                    </mssql-info>
                    <mysql-info ng-if="!initCmsModel.isUseLocal && dbProvider.value=='MySQL'"
                        init-cms-model="initCmsModel">
                    </mysql-info>
                    <posgresql-info ng-if="!initCmsModel.isUseLocal && dbProvider.value=='PostgreSQL'"
                        init-cms-model="initCmsModel">
                    </posgresql-info>
                    <mssql-local-info ng-if="initCmsModel.isUseLocal" init-cms-model="initCmsModel">
                    </mssql-local-info>
                </div>

                <!-- <hr class="mt-4"> -->
                <!-- <div class="text-end">
                    <button ng-click="initCms();" class="btn btn-primary">
                        <span>Connect</span>
                    </button>
                </div> -->
            </form>
            <!-- /////////////////////////////////////////////////////// -->
        </div>
    </div>
    <div class="row align-items-center mt-3">
        <div class="col-4">
            <div class="progress">
                <div class="progress-bar" style="width: 25%" role="progressbar" aria-valuenow="25" aria-valuemin="0"
                    aria-valuemax="100">
                    <span class="visually-hidden">25% Complete</span>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="btn-list justify-content-end">
                <!-- <a href="#" class="btn btn-link link-secondary">
                    Set up later
                </a> -->
                <button ng-click="initCms();" class="btn btn-primary">
                    <span>Continue</span>
                </button>
            </div>
        </div>
    </div>
</div>